<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
        .hairline {
            position: relative;
        }

        .hairline:after {
            content: '';

            /* 放大 */
            position: absolute;
            top: -50%;
            bottom: -50%;
            left: -50%;
            right: -50%;

            /* 缩小 */
            -webkit-transform: scale(0.5);
            transform: scale(0.5);

            /* 边框 */
            border-width: 0;
            border-style: solid;

            /* 不遮挡 */
            pointer-events: none;
        }
        /* 全边框 */
        .hairline--round:after {
            border-width: 1px;
            /* no */
        }

        /* 单边框 */
        .hairline--top:after {
            border-top-width: 1px;
            /* no */
        }

        .hairline--right:after {
            border-right-width: 1px;
            /* no */
        }

        .hairline--bottom:after {
            border-bottom-width: 1px;
            /* no */
        }

        .hairline--left:after {
            border-left-width: 1px;
            /* no */
        }

        /* 输入框 */
        .hairline--input input,
        .hairline--input textarea {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            border: none;
            border-radius: inherit;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    </style>
    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> -->
</head>
<body style="font-size: 12px;">
    <div style="width: 160px;background-color:red;" >hairline</div>
    <div class="hairline hairline--round">hairline</div>
    <br>
    <div class="hairline hairline--round hairline--input"><input value="测试" style=" outline:none;"/></div>
    <input/>
</body>

</html>